<!--专业班次管理-->
<template>
  <div class="wrapper-container">
    <div style="float: left; width: 300px; border-right: 3px solid #427EBC; margin: -25px 0; padding-top: 25px; height: calc(100vh - 95px);overflow: scroll;">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <div style="float: right; width: calc(100vw - 557px); height: calc(100vh - 95px); margin: -25px 0; padding: 25px 0 0 25px">
      <div style="display: flex; flex-direction: row;">
        <div class="cjrc-button" style="width: 150px; background: #fff6ef; border: 1px solid #f3b815; color: #f3b815;margin-right:25px" @click="handleAdd">
          <img src="../../../assets/assessment/icon-add.png" />
          <span>新建专业班次</span>
        </div>
        <div class="cjrc-button" style="width: 180px; background: #efebff; border: 1px solid #5230e9; color: #5230e9;margin-right:25px" @click="handleBatchAdd">
          <img src="../../../assets/assessment/组 738.png" />
          <span>批量创建专业班次</span>
        </div>
        <div class="cjrc-button" style="width: 210px; background: #ffefef; border: 1px solid #fa5339; color: #fa5339;margin-right:25px" @click="handleBatchDel">
          <img src="@/assets/assessment/删除.png" />
          <span>批量删除选中专业班次</span>
        </div>
      </div>
      <div class="table-container" style="margin-top: 20px;">
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          class="xpaas-table-class"
          max-height="700"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class">
          <el-table-column width="65" align="center" type="selection" />
          <el-table-column width="350" prop="cz" label="操作" align="center">
            <template slot-scope="scope">
              <div class="cjrc-button" @click="handleEdit(scope.row)" style="width: 80px; background: #f1fff8; border: 1px solid #02c86c; color: #02c86c;display: inline-block;margin-right:10px">
                <img src="../../../assets/assessment/icon-plan-record-detail.png" style="width:14px;height:14px;position: relative;top: 2px;margin-right: 5px;" />
                <span>修改</span>
              </div>
              <div class="cjrc-button" @click="handleDelete(scope.row.id)" style="width: 80px; background: #ffefef; border: 1px solid #ff3819; color: #ff3819;display: inline-block;margin-right:10px">
                <img src="@/assets/assessment/删除.png" style="width:14px;height:14px;position: relative;top: 2px;margin-right: 5px;" />
                <span>删除</span>
              </div>
              <div class="cjrc-button" @click="handleDetail(scope.row)" style="width: 80px; background: #f1f8fe; border: 1px solid #51aef6; color: #51aef6;display: inline-block;margin-right:10px">
                <img src="../../../assets/assessment/icon-look.png" style="width:16px;height:13px;position: relative;top: 2px;margin-right: 5px;" />
                <span>详情</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="className" label="专业班次" align="center" />
          <el-table-column prop="alias" label="别名" align="center" />
          <el-table-column prop="studenteamname" label="学员队" align="center" />
          <el-table-column prop="specialtyName" label="专业" align="center" />
          <el-table-column prop="year" label="年级" align="center" />
          <el-table-column prop="campus" label="所在校区" align="center" />
          <el-table-column prop="ratedNumber" label="额定人数" align="center" />
        </el-table>
      </div>
      <div style="float: right; margin: 10px 0;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <div class="export-button" style="width: 140px; margin-top: 15px;">
        <img src="../../../assets/assessment/icon-export.png" />
        <download-excel
          :data="tableData"
          :fields="jsonFields"
          type="xls"
          name="专业班次信息.xls"
          style="color: #f3b815;">
          <span>导出Excel</span>
        </download-excel>
      </div>
    </div>
  </div>
</template>

<script>
import { getClassByYear, getSpecialtyList,queryRemoveId } from '@/api/classHoursAddList/addList'
import {
  reqZybcListAll,
} from "@/api/admin1/check";
export default {
  data() {
    return {
      nodeInfo:{},
      pageNo: 1,
      pageSize: 10,
      total: '',
      nodeKey:'',
      dataListSelections:[],
      tableData: [],
      treeData: [],
      jsonFields: {
        专业班次: 'className',
        别名: 'alias',
        学员队: 'studentTeam',
        专业: 'specialtyName',
        年级: 'grade',
        所在校区: 'campus',
        额定人数: 'ratedNumber'
      },
      issAll:true
    }
  },
  mounted() {
    this.getClassByYear();
    this.reqList()
  },
  created() {
  },
  methods: {
    getClassByYear(){
      getClassByYear().then(res => {
        let classList
        if (res.data.data !== null && res.data.data.length > 0) {
          res.data.data.forEach(record => {
            record.year
            classList = []
            if (record.yearSpecialtyInfoList !== null && record.yearSpecialtyInfoList.length > 0) {
              record.yearSpecialtyInfoList.forEach(item => {
                classList.push({
                  id: item.id,
                  label: item.specialtyName +'【' + item.trainingLevelname + '】'
                })
              })
              this.treeData.push({
                id: record.year,
                label: record.year,
                children: classList
              })
            }
          })
        }
      })
    },
    reqList(){
      reqZybcListAll(this.pageNo,this.pageSize).then(res=>{
        if(res.data.code == 200){
          this.tableData = res.data.data.records;
          this.total = res.data.data.total
        }
      })
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      if(this.issAll){
        this.reqList();
        return 
      } else {
        let data;
        if (this.nodeInfo.children === undefined) {
          data = {
            id: this.nodeInfo.id,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        } else {
          data = {
            year: this.nodeInfo.id,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        }
        this.getSpecialtyList(data);
      }
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      if(this.issAll){
        this.reqList();
        return 
      } else {
        let data;
        if (this.nodeInfo.children === undefined) {
          data = {
            id: this.nodeInfo.id,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        } else {
          data = {
            year: this.nodeInfo.id,
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        }
        this.getSpecialtyList(data);
      }
    },
    handleAdd: function () {
      this.$router.push({
        path: '/admin/csTest/editClass',
        query: {
          optionType: 'add',
          zybcid: ''
        }
      })
    },
    //删除单个或者多个
    handleBatchAdd: function () {
      this.$router.push({
        path: '/admin/csTest/batchCreate',
      })
    },
    handleEdit: function (row) {
      this.$router.push({
        path: '/admin/csTest/editClass',
        query: {
          optionType: 'edit',
          zybcid: row.id,
          year:row.year
        }
      })
    },
    handleDelete: function (id) {
      this.$confirm('确认要删除吗？')
        .then(_ => {
          queryRemoveId(id).then(res=>{
            if(res.data.code == 200){
              this.$message({
                showClose: true,
                message: '删除成功',
                type: "success",
              });
              let data = {
                  year: this.nodeKey,
                  pageNo: this.pageNo,
                  pageSize: this.pageSize
                }
                this.getSpecialtyList(data);
            } else {
              this.$message({
                showClose: true,
                message: res.data.data,
                type: "error",
              });
            }
          })
        })
    },
    handleSelectionChange(val) {
      let newArr = [],that = this;
      that.dataListSelections = val;
      val.forEach((element) => {
        newArr.push(element.id);
      });
      that.ids = newArr.join(",");
    },
    handleBatchDel(){
      if(this.dataListSelections.length <= 0){
        this.$message({ type: "error", message: '请先选择需要删除的数据！' });
      } else {
        this.$confirm('确认要删除吗？')
          .then(_ => {
            queryRemoveId(this.ids).then(res=>{
              if(res.data.code == 200){
                this.$message({
                  showClose: true,
                  message: '删除成功',
                  type: "success",
                });
                let data = {
                  year: this.nodeKey,
                  pageNo: this.pageNo,
                  pageSize: this.pageSize
                }
                this.handleNodeClick(this.nodeInfo)
                // this.getSpecialtyList(data);
              } else {
                this.$message({
                  showClose: true,
                  message: res.data.data,
                  type: "error",
                });
              }
            })
          })
      }
    },
    handleDetail: function (row) {
      this.$router.push({
        path: '/admin/csTest/viewClass',
        query: {
          zybcid: row.id
        }
      })
    },
    handleNodeClick: function (node) {
      this.issAll = false;
      this.nodeInfo = node;
      this.nodeKey = node.id;
      let data
      if (node.children === undefined) {
        data = {
          id: node.id,
          pageNo: 1,
          pageSize: this.pageSize
        }
      } else {
        data = {
          year: node.id,
          pageNo: 1,
          pageSize: this.pageSize
        }
      }
      this.pageNo = 1;
      this.getSpecialtyList(data);
    },
    getSpecialtyList(data){
      getSpecialtyList(data).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data;
          this.total = res.data.data.length > 0 ? res.data.data[0].tol : '';
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-tree-node__label{
}
    
/deep/.el-tree {
  color: #004ca7;
  .el-tree-node__content {
    .el-tree-node__label {
        width: 240px;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        display: block !important;
        font-size: 16px;
      // font-weight: 700;
    }
  }
} 
// /deep/.el-tree-node{
//   position: relative;
//   padding-left: 15px;
// }
// /deep/.el-tree-node__children{
//   padding-left: 10px;
// }
// /deep/.el-tree-node :last-child:before {
//   height: 38px;
// }
// /deep/.el-tree>.el-tree-node:before{
//   // border-left: none;
// }
// /deep/.el-tree>.el-tree-node:after{
//   border-top: none;
// }
// /deep/.el-tree-node:before,.el-tree-node:after{
//   content: "";
//   left: 27px;
//   position: absolute;
//   right: auto;
//   border-width: 1px;
// }
// /deep/.tree :first-child .el-tree-node:before{
//   // border-left: none;
// }
// /deep/.el-tree-node:before {
//   border-left: 1px dashed #004ca7;
//   bottom: 0px;
//   height: 100%;
//   top: 15px;
//   width: 1px;
// }
// .span-ellipsis {
//   width: calc(100% - 4px);
//   overflow: hidden;
//   white-space: nowrap;
//   text-overflow: ellipsis;
//   min-width: auto;
//   padding: 4px 2px;
//   border-radius: 4px;
// }
// /deep/.el-tree-node:after {
//   border-top: 1px dashed #004ca7;
//   height: 20px;
//   top: 17px;
//   width: 12px;
// }
// /deep/.el-tree-node__content .is-leaf{
//   margin-left: -10px;
// }
// /deep/.el-tree-node :last-child:before {
//   height: 30px;
//   line-height: 30px;
// }
 .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

.plsc-button {
  height: 28px;
  background: #ffefef;
  border: 1px solid #fa5339;
  border-radius: 6px;
  color: #ff3819;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.cjrc-button {
  height: 28px;
  line-height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  img {
    width: 17px;
    height: 17px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-right: 5px;
  }
}
.search-container {
    flex-direction: row;
    justify-content: space-between;
    .search-container-left {
      display: flex;
      flex-direction: row;
    }
    .search-container-right {
      display: flex;
      flex-direction: row;

      justify-content: flex-end;
      margin-top: 17px;
    }
    .search-container-item {
      color: #004ca7;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      margin-right: 30px;
      > span {
        margin-right: 6px;
      }
    }
    .search-button {
      width: 77px;
      height: 28px;
      line-height: 28px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #51aef6;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .export-buttons {
      margin-right: 20px;
      width: 180px;
      height: 28px;
      line-height: 28px;
      background:#ebe6ff;
      border: 1px solid #5230e9;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #5230e9;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .export-button {
      margin-right: 20px;
      width: 180px;
      height: 28px;
      line-height: 28px;
      background: #f1fff8;
      border: 1px solid #02c86c;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #02c86c;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
    .add-button {
      width: 180px;
      height: 28px;
      line-height: 28px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      > span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
      > img {
        width: 20px;
        height: 20px;
        margin-right: 4px;
      }
    }
  }
.plan-entry-table-container {
  margin-top: 30px;
  width: 100%;
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .el-checkbox__inner:hover {
    border-color: #004ca7;
  }

  .el-checkbox__inner {
    border: 1px solid #004ca7;
    border-radius: 0;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #004ca7;
    border-color: #004ca7;
  }

  .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #004ca7;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: #004ca7;
  }

  .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #004ca7;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;

    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .lucj-import-button {
    .export-button;
    width: 116px;
    margin: 0 auto 12px;
    background: #f1fff8;
    border: 1px solid #02c86c;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .lucj-expot-button {
    .export-button;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 81px;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f3b815;
    }
  }
}
.container {
  width: 100%;
  display: flex;
  .left {
    width: 20%;
  }
  .right {
    /deep/ .el-table thead {
      color: #004ca7;
    }
  }
}
.search-container {
  justify-content: flex-start !important;
}
 .tjst-button {
      width: 78px;
      height: 27px;
      line-height: 27px;
      background: #f1f8fe;
      border: 1px solid #51aef6;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
      cursor: pointer;
    }
    .ckmtjh-button {
      .tjst-button;
      width: 114px;
      background: #f1fff8;
      border: 1px solid #02c86c;
      color: #02c86c;
    }
.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
.item-row .el-col {
  display: flex;
  align-items: center;
  min-height: 60px;
  border-right: none !important;
}
.item-row .el-col:not(:first-child) {
  border-left: 1px solid rgba(0, 76, 167, 0.39);
}
.single-row .el-col:not(:last-child) {
  border-right: 1px solid rgba(0, 76, 167, 0.39);
}
.my-form .single-row:not(:last-child) {
  border-bottom: 1px solid rgba(0, 76, 167, 0.39);
}
.name-col {
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: #004ca7;
  background: rgba(77, 129, 192, 0.1);
}
.content-col {
  padding-left: 10%;
}
.wrapper-container {
  .my-form {
    width: 100%;
    border: 1px solid rgba(0, 76, 167, 0.8);
    margin: 57px auto 19px;
    border-radius: 9px;
  }
  .button-group {
    padding-top: 20px;
    width: 915px;
    margin: 0 auto;
    text-align: center;
    > div {
      display: inline-block;
      font-size: 18px;
      padding: 6px 22px;
      border-radius: 6px;
      &:nth-child(1) {
        color: #f3b815;
        border: 1px solid #f3b815;
        background: #fff6ef;
        margin: 0 40px;
      }
    }
  }
}

@import "../../../styles/special.less";
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.content-div {
  max-width: 200px;
}
.comment-div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.wrapper-container {
  width: 100%;
}
.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 76px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 76px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-weight: normal;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-container {
    width: 100%;
    margin: 40px auto 18px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 5px;
    .my-form-item {
      height: 85px;
      border-bottom: 1px solid rgba(0, 76, 167, 0.39);
      margin-bottom: 0;
      > div {
        display: flex;
        height: 100%;
        &:nth-child(2) {
          .my-form-item-label {
            border-left: 1px solid rgba(0, 76, 167, 0.39);
          }
        }
        .my-form-item-label{
          width: 220px;
          padding-left: 60px;
          background: rgba(0, 76, 167, 0.1);
          display: flex;
          flex: none;
          align-items: center;
          color: #004CA7;
          font-size: 16px;
          font-weight: bold;
          border-left: 1px solid rgba(0, 76, 167, 0.39);
          margin-left: -1px;
          .mustW {
            color: red;
          }
        }
        .el-form-item__content{
          display: flex;
        }
      }
    }
  }
</style>
